import { useNavigate } from 'react-router-dom';
import { Button } from 'react-vant'
import { Toast, NavBar } from 'react-vant';
import { Outlet } from 'react-router-dom';
// 2.采用 React Hooks 和 TypeScript 类型系统进行组件开发
function App() {
  const nav=useNavigate()
  return (
    <div>
      <NavBar
      title="热搜"
      leftText=""
      rightText=""
      onClickLeft={() => Toast('')}
      onClickRight={() => Toast('')}
    >

    </NavBar>
    <Button onClick={()=>nav('/home')} style={{width:'20%'}}>首页</Button>
        <Button onClick={()=>nav('/re')} style={{width:'20%'}}>热搜</Button>
        <Button onClick={()=>nav('/index')} style={{width:'20%'}}>小说</Button>
        <Button onClick={()=>nav('/movie')} style={{width:'20%'}}>电影</Button>
        <Button onClick={()=>nav('/ju')} style={{width:'20%'}}>电视剧</Button>
        <Outlet></Outlet>
    </div>
  )
}

export default App
